<template>
  <el-tabs type="border-card">
    <el-tab-pane label="密码登录">
      <el-form label-width="60px">
        <el-form-item label="账号">
          <el-row>
            <el-col :span="24">
              <el-input prefix-icon="User" v-model="username" placeholder="请输入用户名"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="密码">
          <el-row>
            <el-col :span="24">
              <el-input show-password prefix-icon="Lock" v-model="password" placeholder="请输入密码"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="24">
              <el-input placeholder="请输入图形验证码" v-model="usercode" @change="blur"></el-input>
            </el-col>
            <el-col :span="4">
              <img :src="url" @click="getCodeImg" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-button class="button" type="success">登录</el-button>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="手机登录">
      <el-form label-width="60px">
        <el-form-item label="账号">
          <el-row>
            <el-col :span="24">
              <el-input prefix-icon="user" v-model="username" placeholder="请输入手机号"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="18">
              <el-input style="width:100%" prefix-icon="user" placeholder="请输入短信验证码" v-model="usercode"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button style="width:80px;height:40px" type="info" @click="getCheckCode" :loading="checkCodeBtn.loading"  :disabled="checkCodeBtn.disabled" >
                {{ checkCodeBtn.text }}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-button class="button" type="success" @click="phoneLogin">登录</el-button>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="免费注册">
      <el-form label-width="60px">
        <el-form-item label="账号">
          <el-row>
            <el-col :span="24">
              <el-input prefix-icon="user" v-model="username" placeholder="请输入账号"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="密码">
          <el-row>
            <el-col :span="24">
              <el-input show-password prefix-icon="lock" v-model="password" placeholder="请输入密码"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="确认">
          <el-row>
            <el-col :span="24">
              <el-input show-password prefix-icon="lock" v-model="repassword" placeholder="确认密码"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="20">
              <el-input style="width:100%" placeholder="输入短信验证码" v-model="usercode" @change="blur"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button style="width:80px;height:40px" type="info">获取验证码</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-button class="button" type="success">登录</el-button>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script >
import { ref } from '@vue/reactivity'
import axios from 'axios'
import { onMounted } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'
import {reactive} from "vue";
export default {
  setup() {
    let url = ref('')
    let uuid = ref('')
    let username = ref('')
    let password = ref('')
    let usercode = ref('')
    let repassword = ref('')
    let time=60;
    let phone=ref();
    let checkCodeBtn=reactive({
      text: '获取验证码',
      loading: false,
      disabled: false,
      duration: 60,
      timer: null
    })
    function getCodeImg() {
      axios.get('api/verification').then((code) => {
        console.log(code)
        url.value = "data:image/gif;base64," + code.data.img
        uuid.value = code.data.uuid
      })
    }
    onMounted(() => {
      getCodeImg()
    })
    // 根据用户名获取验证码
    const getCheckCode = () => {
      //获取验证码
      phoneCode()
      // 倒计时期间按钮不能单击
      if (checkCodeBtn.duration !== 60) {
        checkCodeBtn.disabled = true
      }
      // 清除掉定时器
      checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
      // 开启定时器
      checkCodeBtn.timer = setInterval(() => {
        const tmp = checkCodeBtn.duration--
        checkCodeBtn.text = `${tmp}秒`
        if (tmp <= 0) {
          // 清除掉定时器
          clearInterval(checkCodeBtn.timer)
          checkCodeBtn.duration = 60
          checkCodeBtn.text = '重新获取'
          // 设置按钮可以单击
          checkCodeBtn.disabled = false
        }
      }, 1000)
    }


    function blur() {
      axios.get('api/AuthenticationToken/' + uuid.value + '/' + usercode.value)
        .then((code) => {
          //判断用户输入验证码是否正确
          //如果正确发送登录请求，错误清空输入框，重新刷新验证码
          if (code.data.code != 200) {
            usercode.value = ''
            console.log("11111")
            getCodeImg()
          } else {
            //发送登录请求
            console.log("发送登录请求")            
            axios.post('/api/user/login',
              {
                  phone: username.value,
                  password: password.value
              }).then((rs) => {
                if(rs.data.code==200){
                  location.href='/'
                }
              }).catch((error) => {
                console.log(error)
              })
          }

        }).catch((error) => {
          console.log(uuid.value)
          console.log(usercode.value)

          console.log(error)
        })
    }

   function phoneCode(){
      axios.post('/api/smsXxs',{
        phoneNumber:username.value
      }).then((rs)=>{
        console.log(rs)
      })
    }
    function phoneLogin(){
      axios.post('/api/validateNum',{
        phone:username.value,
        verifyCode:usercode.value
      }).then((rs)=>{
        if(rs.data.code==200){
         window.location.href='/'
        }else if(rs.data.code==404){
            ElMessage.warning("验证码失效")
        }else if(rs.data.code==500){
          ElMessage.error("验证码错误")
        }else{
          ElMessage.error("手机号错误!")
        }
      })
    }

    return {
      url, uuid, getCodeImg, blur, usercode, username, password, repassword,phoneLogin,phoneCode,checkCodeBtn
      ,getCheckCode
    }
  }
}
</script>

<style>
.action {
  border: 1px solid red
}

.button {
  width: 100%;
}

.el-input {
  width: 300px;
  height: 40px;
}

.el-tabs {
  width: 400px;
}
</style>